<template>
  <b-container class="headerCard" fluid>
    <b-row>
      <b-col sm="2" style="text-align: center">
        <b-link class="linkBar">取啥名</b-link>
      </b-col>
      <!-- 跳转链接处 -->
      <b-col sm="3" style="text-align: left">
        <pre class="mt-2 mb-0" />
        <b-link @click="toRedirect(1)" class="linkTitle">主页</b-link>
        <b-link @click="toRedirect(2)" class="link">个人空间</b-link>
        <b-link @click="toRedirect(3)" class="link">吵天广场</b-link>
      </b-col>
      <b-col></b-col>
      <!-- 位置-->
      <b-col sm="3">
        <TheLocation v-show="this.$store.state.locationCard.show" />
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
import TheLocation from "../components/header/TheLocation";

export default {
  name: "MyHeader",
  data() {
    return {
      // 是否固定
      isFixed: false,
      //...其他data
    };
  },
  components: {
    TheLocation,
  },
  methods: {
    //header跳转
    toRedirect(id) {
      switch (id) {
        case 1: {
          this.$router.push({
            path: "/mainPage",
            params: {
              id: 1,
              title: "首页",
            },
          });
          break;
        }
        case 2: {
          this.$router.push({
            path: "/personSpeace",
            params: {
              id: 2,
              title: "个人空间",
            },
          });
          break;
        }
        case 3: {
          this.$router.push({
            path: "/chat",
            params: {
              id: 3,
              title: "聊天室",
            },
          });
          break;
        }
      }
    },
  },
  mounted() {},
};
</script>

<style scoped lang="css">
.headerCard {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
.link {
  width: 100%;
  margin-left: 15%;
  text-decoration: none;
  font-size: 130%;
}
.linkTitle {
  width: 100%;
  margin-left: 1%;
  text-decoration: none;
  font-size: 130%;
}
.linkBar {
  width: 100%;
  text-decoration: none;
  font-size: 200%;
}
</style>
